/*
 * @Author: xiaosihan 
 * @Date: 2024-01-09 00:45:02 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-09 01:22:40
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./designTemplateColorPick.module.less";
import clsx from "clsx";
import designTemplateEditorStore from "../../designTemplateEditorStore";

interface Iprops {
    children?: ReactNode
}

// 设计模版的颜色拾取器
export default function DesignTemplateColorPick(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [colorPicker, setColorPicker] = useState(designTemplateEditorStore.colorPicker);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setColorPicker(designTemplateEditorStore.colorPicker);
    }), []);

    return (
        <div
            className={clsx(styles.colorPick, colorPicker && styles.active)}
            onClick={() => {
                designTemplateEditorStore.setColorPicker(!colorPicker);
            }}
        >
            <svg
                className="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7166"
                width="1024"
                height="1024">
                <path d="M628.394667 244.906667L195.626667 675.541333a96.384 96.384 0 0 0-28.032 62.72l-15.189334 15.189334a83.498667 83.498667 0 0 0 117.973334 118.016l15.274666-15.189334a95.402667 95.402667 0 0 0 62.72-28.032L781.098667 397.653333l-152.704-152.746666z" fill="#FFFFFF" p-id="7167"></path><path d="M803.328 104.618667c17.578667 0 34.432 6.997333 46.848 19.456l40.661333 40.618666c25.898667 25.898667 25.941333 67.882667 0.085334 93.824L796.501333 352.853333l15.445334 15.445334 3.584 4.010666a42.624 42.624 0 0 1-3.584 56.32l-29.909334 29.866667a42.666667 42.666667 0 0 1-60.288 0.085333l-0.981333-0.981333-372.394667 370.688c-14.848 14.933333-34.133333 24.490667-54.912 27.306667l-7.808 0.725333-15.274666 15.189333A82.688 82.688 0 0 1 211.413333 896a83.498667 83.498667 0 0 1-63.872-137.216l4.864-5.290667 15.189334-15.146666c1.152-21.034667 9.173333-41.002667 22.698666-56.96l5.333334-5.802667 372.48-370.773333-4.224-4.181334-7.381334-7.381333-3.584-4.053333a42.666667 42.666667 0 0 1 3.541334-56.32l29.866666-29.866667a42.666667 42.666667 0 0 1 60.330667 0l15.402667 15.445333 94.378666-94.378666a66.176 66.176 0 0 1 46.890667-19.456z m-205.098667 230.4L225.792 705.706667c-7.978667 8.021333-13.226667 18.304-15.018667 29.354666l-0.597333 5.589334-0.896 16.298666-26.666667 26.666667a40.832 40.832 0 0 0 53.589334 61.269333l4.053333-3.584 26.837333-26.794666 16.341334-0.853334c11.221333-0.597333 21.888-4.693333 30.634666-11.861333l4.224-3.797333 372.266667-370.602667-92.330667-92.458667z" fill={colorPicker ? "#fd7901" : "#5D6D7E"} p-id="7168"></path>
            </svg>
        </div>
    );

}